<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

    <!--editor.md-->
    <link rel="stylesheet" th:href="@{/lib/style.css}" />
    <link rel="stylesheet" th:href="@{/lib/editormd.css}"/>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <link rel="stylesheet" th:href="@{/css/me.css}">
    <title>后台</title>
</head>
<body>

<div th:replace="~{commons::admin('blog')}"></div>

<div class="container">
    <!--身体-->
    <div class="container" style="opacity: 0.9;">
        <form th:action="@{/admin/updateArticle}" method="post" enctype="multipart/form-data">
            <div class="row text-left" style="display: flex">
                <input type="text" hidden="hidden" name="id" th:value="${oldArticle.getId()}">
                <label>文章标题:</label>
                <input name="title" style="width: 25em" class="form-control" th:value="${oldArticle.getTitle()}"
                       required placeholder="请输入标题..."  type="text">
                <label>封面图片:</label>
                <input type="file" name="file">
                原图片为:<small th:text="${oldArticle.getImage()}"></small>
            </div>
            <div class="row text-left">
                <label>选择标签:</label>
                <label th:each="tag:${tags}" class="checkbox-inline">
                    <input th:checked="${oldTags.contains(tag.getId())}?'checked'" name="tags" type="checkbox" th:value="${tag.getId()}"> <p th:text="${tag.getName()}"></p>
                </label>

            </div>
            <div class="row">
                <div id="layout">
                    <header>
                        <h2>编辑博客</h2>
                    </header>
                    <div id="test-editormd">
                <textarea th:text="${oldArticle.getContent()}" name="content">[TOC]
                #### Disabled options

                - TeX (Based on KaTeX);
                - Emoji;
                - Task lists;
                - HTML tags decode;
                - Flowchart and Sequence Diagram;
                </textarea>
                    </div>
                </div>
            </div>
            <div class="row text-right">
                <input type="submit" class="btn btn-success" style="width: 5em">
            </div>
        </form>
    </div>

</div>



<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

<script th:src="@{/lib/editormd.min.js}"></script>
<script type="text/javascript">
    var testEditor;

    $(function() {
        testEditor = editormd("test-editormd", {
            width   : "90%",
            height  : 600,
            syncScrolling : "single",
            path    : "../lib/lib/"
        });


    });
</script>

</body>
</html>